
<template>
  <div class="h-full flex flex-col bg-gray-100">
    <!-- 导航栏 -->
    <div class="nav-bar h-12 flex items-center px-4">
      <button @click="goBack" class="text-white">
        <i class="fas fa-chevron-left text-lg"></i>
      </button>
      <h2 class="text-lg font-semibold ml-4">二维码名片</h2>
    </div>

    <!-- 二维码内容 -->
    <div class="flex-1 flex items-center justify-center p-4">
      <div class="bg-white rounded-lg p-8 text-center">
        <img 
          :src="user.avatar" 
          :alt="user.nickname"
          class="w-20 h-20 rounded-full mx-auto mb-4"
        >
        <h3 class="text-xl font-semibold mb-2">{{ user.nickname }}</h3>
        <p class="text-gray-600 mb-6">微信号: {{ user.username }}</p>
        
        <!-- 二维码 -->
        <div class="w-48 h-48 bg-gray-200 mx-auto mb-4 flex items-center justify-center">
          <div class="text-center">
            <i class="fas fa-qrcode text-6xl text-gray-400"></i>
            <p class="text-sm text-gray-500 mt-2">二维码</p>
          </div>
        </div>
        
        <p class="text-sm text-gray-500">扫一扫上面的二维码图案，加我微信</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores'

const router = useRouter()
const userStore = useUserStore()

const user = userStore.user

const goBack = () => {
  router.back()
}
</script>
